<template>
	<zui-box>
		<!-- 头部导航 -->
		<zui-navbar :have_back='false' title='商城'></zui-navbar>
		<!-- 假搜索 -->
		<view class="search_box">
			<u-search shape="round"  placeholder='请输入搜索商品' :disabled='true'
				:showAction="false" @click="go_search()"></u-search>
		</view>

		<!-- 轮播图 -->
			<view class="banner"><u-swiper bgColor="transparent" :list="banner" keyName="img" circular height="360rpx" radius="0" wigth="750rpx"></u-swiper></view>

		<u-gap height="30rpx"></u-gap>
		<!-- 分类列表 -->
		<!-- <view class="classify_list" style="color:#F1B863">
			<u-grid col="5" :border="false" @click="click">
				<u-grid-item v-for="(item,index) in classify_list" :key="index">
					<u-icon :customStyle="{paddingTop:10+'rpx'}" :name="item.img" :size="35"></u-icon>
					<text class="grid-text">{{item.title}}</text>
				</u-grid-item>
			</u-grid>
		</view> -->
		
		<!-- 分类九宫格 -->
	<!-- 	<view class="classify_list">
			<u-grid col="4" :border="false" @click="click_classify">
				<u-grid-item v-for="(item, index) in classify_list" :key="index" :name="item.id">
					<u-icon :customStyle="{ paddingTop: 10 + 'rpx' }" :name="item.cat_img" :size="48"></u-icon>
					<text class="grid-text">{{ item.cat_name }}</text>
				</u-grid-item>
			</u-grid>
		</view>
		 -->
		<swiper class="swiper" style="height: 360rpx;" autoplay="true">
			<swiper-item>
				<view class="classify_list">
					<u-grid col="4" :border="false" @click="click_classify">
						<u-grid-item v-for="(item, index) in classify_list" :key="index" :name="item.id" v-show="index<8">
							<u-icon :customStyle="{ paddingTop: 10 + 'rpx' }" :name="item.cat_img" :size="48"></u-icon>
							<text class="grid-text">{{ item.cat_name }}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</swiper-item>
			<swiper-item>
					<view class="classify_list">
				<u-grid col="4" :border="false" @click="click_classify">
					<u-grid-item v-for="(item, index) in classify_list" :key="index" :name="item.id" v-show="index>=8">
						<u-icon :customStyle="{ paddingTop: 10 + 'rpx' }" :name="item.cat_img" :size="48"></u-icon>
						<text class="grid-text">{{ item.cat_name }}</text>
					</u-grid-item>
				</u-grid>
						</view>
			</swiper-item>
		</swiper>
		
		

			<u-gap height="30rpx"></u-gap>
		<!-- 商品列表 -->
		<view class="list">
			<view class="item" @click="go_to(item)" v-for="(item, index) in good_list" :key="index">
				<image :src="item.goods_thumb" class="image"></image>
				<view class="text">
					<view class="title one">{{ item.goods_name }}</view>
					<view class="small_text ">¥{{ item.goods_price }}</view>
				</view>
			</view>
		</view>

		<u-gap height="30rpx"></u-gap>

	</zui-box>

</template>
<script>
	export default {
		data() {
			return {
				banner: [],
				classify_list: [],
				good_list: []
			}
		},
		//页面加载完毕
		onLoad(e) {},
		//每次进入页面
		onShow() {
			//获取接口
			
			this.step();
		},
		methods: {
			//获取接口步骤
			step() {
				//获取轮播图
				this.get_banner();
				//获取分类
				this.get_classify();
				//获取值得购商品 前三条
				this.get_good_list();
			},
			
			//获取轮播图
			get_banner() {
				// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
				uni.$u.http
					.get('/app/banner/list', {
						params: {
							type:2
						},
						custom: {
							auth: true,
							toast: true,
							catch: true
						}
					})
					.then(res => {
						let arr = res;
						let banner = arr.map((item, index) => {
							return item.image; //返回值会作为储存到另一个数组当作总体的返回值
						});
						this.banner = banner;
					})
					.catch(err => {});
			
				uni.$u.http
					.get('/app/adverting/getAdverting', {
						params: {},
						custom: {
							auth: true,
							toast: true,
							catch: true
						}
					})
					.then(res => {
						this.Adverting = res;
						if (res.image) {
							this.$refs.zui_pop.do_open();
						}
					})
					.catch(err => {});
			},
			
			get_classify() {
				// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
				uni.$u.http
					.get('/app/product/getCategoryList', {
						params: {},
						custom: {
							auth: true,
							toast: false,
							catch: false
						}
					})
					.then(res => {
						console.log('获取分类', res);
						let arr = res;
						// let obj = {
						// 	id: 999,
						// 	is_enable: 1,
						// 	cat_img: require('@/static/img/classify_icon.png'),
						// 	cat_name: '分类',
						// 	create_by: 0,
						// 	create_time: '1970-01-01 08:00:00',
						// 	delete_time: null,
						// 	is_enable: 1,
						// 	sort: 9,
						// 	update_time: '2022-02-28 16:24:06'
						// };
						// arr.push(obj);
			
						this.classify_list = arr;
					})
					.catch(err => {});
			},
			//分类跳转
			click_classify(id) {
				console.log('获取id', id);
				if (id == 999) {
					this.xz_go('classify');
				} else {
					//跳转到详情1&name=uniapp
					let name = '';
					let item = this.classify_list.find(item => item.id == id);
					name = item.cat_name;
					uni.navigateTo({ url: '/pages/one_mouth/good_list?cat_id=' + id + '&name=' + name  });
				}
			},
			
			//获取首页商城
			get_good_list() {
				// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
				uni.$u.http
					.get('/app/product/list', {
						params: {
							is_recommend: 1
						},
						custom: {
							auth: true,
							toast: false,
							catch: false
						}
					})
					.then(res => {
						this.good_list = res.list;
					})
					.catch(err => {});
			},
			go_search(){
				uni.navigateTo({ url: '/pages/one_mouth/search'});
			},
			go_to(item) {
				uni.navigateTo({ url: '/pages/one_mouth/good_item?id=' + item.id });
			}
			
		},
	}
</script>
<style lang="scss" scoped>
	.one{
		white-space: nowrap;
		  overflow: hidden;
		  text-overflow: ellipsis;
	}
	//搜索框
	.search_box {
		width: 750rpx;
		margin: 0 auto;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;
	}

	//轮播图
	.banner {
		/deep/.u-swiper__wrapper__item__wrapper {
			width: 690rpx !important;
			margin: 0 auto !important;
			border-radius: 20rpx;
			overflow: hidden;
		}
	}

//分类九宫格
.classify_list {
	color: #414141;
	.grid-text {
		font-size: 24rpx;
		line-height: 3;
	}

	/deep/.u-icon__img {
		// height: 70rpx !important;
		// width: 70rpx !important;
	}
}


// 商品列表

.list {
	width:700rpx;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;

	.item {
		
		box-sizing: border-box;
		padding: 30rpx 0;
		
		font-size: 28rpx;
		border-radius: 5px;
		position: relative;
		
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		
		
		 width: 30%;
		 margin: 0 1.66%;
		 margin-bottom: 25rpx;
		 
		 
	}
	

	.image {
		flex-shrink: 0;
		margin-bottom: 30rpx;
		border-radius: 8rpx;
		width: 160rpx;
		height: 160rpx;
		display: block;
	}

	.text {
		width: 100%;
		text-align: center;
		.title {
			color: #414141;
			line-height: 60rpx;
			font-size: 28rpx;
		}

		.small_text {
			color: #e63a2a;
			line-height: 60rpx;
			font-size: 26rpx;
		}
	}
}
</style>
